/**
 * WidgetEventUrlInput module
 */

import React,{Component} from "react";
import { connect } from 'dva';
import classnames from 'classnames';
import { bindActionCreators } from 'redux';
import widgetsActions from '../../../actions/Editor/widgets';
import editorActions from '../../../actions/Editor/editor';
import tool from "../../../utils/tool";
import CommonProperty from "./CommonProperty";
import Validator from "../../../utils/validator/Validator";

class WidgetEventUrlInput extends Component{
    mixins: [CommonProperty]
    constructor(props) {
        super(props);
        this.state = {             
            url: "",
            invalidUrl: false
        };
    }
    componentWillMount(){
        var widget = this.props.widget;
        var url = this.url = widget.action.url;
        this.setState({
            url: url
        });
    }
    componentDidMount(){
        this.initElements();
    }
    initElements(){
        this.elements = {
        };
    }
    handleOnUrlChanged(e){
        var element = $(e.target || e.srcElement);
        var url = element.val();
        var result = this.checkValidate();

        if (result){
            this.url = url;
        }

        this.setState({
            url: url,
            invalidUrl: !result
        });
    }
    checkValidate(){
        var validator = Validator();

        validator.addRule($(this.refs.Url), [{
            validator: "url",
            error: $._('Please enter a valid Website')
        }]);

        var errors = validator.execute();
        if (errors){
            return false;
        }
        return true;
    }
    handleOnInputBlur(){
        const {widget,setState,updateWidget} = this.props;
        let data = widget;
        if (this.url){
            var url = tool.completionUrl(this.url);
            this.setState({
                url: url
            });
            data.action.url = url;
            setState({selectedWidget: data});
            updateWidget(widget);
        }
    }
    render(){
        const {widget} = this.props;
        let errorNode = "";
        if (this.state.invalidUrl){
            errorNode = <div className="alerterror" style={{ padding: 0 }}>{$._('Please enter a valid Website')}</div>
        }

        return (
            <div className="form-group rowli">
                <label className="control-label">{$._('Web address')}</label>
                <input onChange={(e) => this.handleOnUrlChanged(e)} onBlur={() => this.handleOnInputBlur()} className="url form-control" value={this.state.url} name="url" type="text" placeholder="http://www.arhieason.com/" ref='Url' />
                {errorNode}
            </div>
        )
    }
};

const mapStateToProps = ({ editor, widgets ,pages}) => {
  const pageId = editor.selectedPageId;
  return {
      widget: editor.selectedWidget,
      widgets: widgets.filter(w => w.page_id === pageId),
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({...widgetsActions,...editorActions}, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(WidgetEventUrlInput);
